<template>
	<view class="flex-col page">

		<!-- 自定义导航栏 -->
		<u-navbar leftIconColor='#EAEAEA' :title="title" titleStyle='font-weight:bold;color:white' bgColor='transparent'
			:autoBack="true">
		</u-navbar>
		<!-- end -->


		<view class="flex-col group">
			<view class="flex-row justify-between section">
				<view class="flex-col self-start group_3">
				</view>
				<view class="flex-col justify-start items-end self-center relative group_2">
					<view class="section_2"></view>
					<view class="section_3 pos_4"></view>
				</view>
			</view>
		</view>


		<!-- 轮播图部分，独立于group，避免overflow限制 -->
		<view class="banner-wrapper">
			<u-swiper height='180' :list="bannerList" keyName="img" :effect3d="true" :previousMargin="25"
				:nextMargin="25" circular :autoplay="true" radius="10" bgColor="transparent" :interval="3000"
				indicatorActiveColor="#ff0000" indicatorInactiveColor="rgba(255,255,255,0.5)" indicator></u-swiper>
		</view>

		<view class="flex-col group_5">
			<view class="mt-13-5">
				<view class="menu-container" :style="{ height: getSwiperHeight(currentPage) + 'rpx' }">
					<swiper :style="{ height: getSwiperHeight(currentPage) + 'rpx' }" :current="currentPage"
						@change="onSwiperChange" :indicator-dots="false" :circular="true" :autoplay="false"
						class="menu-swiper">
						<swiper-item v-for="(page, pageIndex) in menuPages" :key="pageIndex">
							<view class="grid" :class="{'grid-single-row': getSingleRow(page.items)}">
								<view @click="toPageNewDatails(item)" v-for="(item, idx) in page.items" :key="idx"
									class="flex-col items-center relative grid-item">
									<image class="image_11" mode="aspectFill" :src="$timer.ensureUrl(item.image)" />
									<text class="mt-8 font_2">{{item.name || ''}}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>

					<!-- 自定义指示点 - 移到swiper外面 -->
					<view class="custom-indicator">
						<view v-for="(page, index) in menuPages" :key="index" class="indicator-item"
							:class="{ 'active': currentPage === index }" @click="currentPage = index"></view>
					</view>
				</view>
			</view>

			<view>
				<view class="flex-col group_6">
					<view @click="toPagePost" class="flex-col justify-start items-start relative section_6">
						<text class="font_4 text_3">期待你的加入</text>
						<view class="flex-col justify-start items-end pos_7">
							<view class="flex-col justify-start items-end section_7">
								<view class="flex-col justify-start items-center text-wrapper">
									<text class="font_3 text_2">申请加入</text>
								</view>
							</view>
							<view class="pos-a font flex ac" style="width: 60vw;top: 20rpx;left: 0rpx;height: 80rpx;line-height: 40rpx;">
								{{title || ''}}
							</view>
							<!-- <text class="font pos_8" ></text> -->
						</view>
					</view>
					<navigator hover-class="none" :url="'/pages/extend/chamber/chamber_detail?cid=' + chamberObj.id">
						<view class="flex-row items-center section_8 mt-19-5">
							<view class="flex-col justify-start items-center shrink-0 image-wrapper_2">
								<image class="shrink-0 image_12" mode="aspectFill"
									:src="$timer.ensureUrl(chamberObj.logo)" />
							</view>
							<view class="flex-col flex-1 ml-8-5">
								<text class="self-start text_4 fw" style="line-height: 46rpx;">{{chamberObj.nickname || ''}}</text>
								<text class="self-stretch font_4 text_5 mt-10-5 line-3 mr-10 line-3">
									{{chamberObj.describe || ''}}
								</text>
							</view>
						</view>
					</navigator>
				</view>
			</view>

			<view class="mt-22 flex-col">
				<view class="flex-row items-center group_7">
					<view class="section_9"></view>
					<text class="ml-6 font_5 text_6">{{chamberObj.config || '商(协)会'}}领导</text>
				</view>
				<view class="flex-col justify-start section_10">
					<view class="auto-scroll-container" @touchstart="onTouchStart" @touchmove="onTouchMove"
						@touchend="onTouchEnd">
						<view class="auto-scroll-wrapper" :style="{ transform: `translateX(-${scrollPosition}px)` }">
							<view @click="toCardPage(item)" v-for="(item,index) in ulist" :key="index"
								class="flex-col items-start group_8 equal-division-item">
								<image class="image_13" mode="aspectFill"
									:src="$timer.ensureUrl(item.avatar) || 'https://yjgs.jsonbug.com/storage/default/20250324/moren.png'" />
								<text class="font_6 mt-15 ml-10 line-1">{{item.name || '--'}}</text>
								<text class="font_4 mt-10 ml-10 line-1">{{item.title || '--'}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt-22 flex-col">
				<view class="flex-row justify-between items-center">
					<view class="flex-row items-center">
						<view class="shrink-0 section_9"></view>
						<text class="ml-6 font_5 text_11">{{chamberObj.config || '商(协)会'}}动态</text>
					</view>
					<text @click="toPageMore" class="font_2 text_12">查看更多动态</text>
				</view>
				<view class="news-list">
					<view @click="toPageDesc(item)" class="news-item" v-for="(item, index) in newsList" :key="index">
						<image class="news-image" :src="$timer.ensureUrl(item.image)" mode="aspectFill" />
						<view class="news-content">
							<view class="news-title-container">
								<text class="news-title line-2">{{item.title || ''}}</text>
							</view>
							<view class="news-tag">
								{{item.config.name || ''}}
							</view>
							<view class="news-footer">
								<text class="news-date">{{$u.timeFormat(item.create_time, 'yyyy-mm-dd')}}</text>
								<view class="news-views">
									<image class="news-views-icon"
										src="https://yjgs.jsonbug.com/storage/default/20250312/17421739645774636474.png" />
									<text class="news-views-count">{{item.number || 0}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mt-22 flex-col">
				<view class="flex-row items-center mb-10">
					<view class="section_9"></view>
					<text class="ml-6 font_5 text_13">{{chamberObj.config || '商(协)会'}}定位</text>
				</view>
				<view class="mt-2 flex-col">
					<view class="flex-col justify-start items-center image-wrapper_3">
						<view class="map-wrapper">
							<map class="map-container" :latitude="mapInfo.latitude" :longitude="mapInfo.longitude"
								:markers="mapMarkers" :scale="16" show-location :show-compass="false"
								:enable-overlooking="false" :enable-rotate="false" :enable-traffic="false"
								:enable-poi="false"></map>
							<!-- 添加覆盖层来遮挡左下角的logo -->
							<!-- <view class="map-cover-bottom-left"></view> -->
						</view>
					</view>
					<view class="flex-col group_15">
						<view class="flex-row items-center section_12">
							<image class="shrink-0 image_21"
								src="https://yjgs.jsonbug.com/storage/default/20250312/59c3dcb7c9caef6ca25d0c8de0417c04.png" />
							<view class="flex-col items-start flex-1 group_16">
								<text class="font_9 text_14">{{chamberObj.config || '商(协)会'}}地址</text>
								<text class="font_10 text_15 mt-9-5 line-2">{{mapInfo.address || ''}}</text>
							</view>
							<image class="shrink-0 image_19 image_20" @tap="openLocation"
								src="https://yjgs.jsonbug.com/storage/default/20250312/17421739640443063747.png" />
						</view>
						<view class="flex-row justify-between items-center section_13">
							<view class="flex-row items-center">
								<image class="image_21"
									src="https://yjgs.jsonbug.com/storage/default/20250312/62a61bca5cae875d7de3665d65368ec4.png" />
								<view class="flex-col items-start ml-10-5">
									<text class="font_9">联系方式</text>
									<text
										class="font_10 text_16 mt-9">{{chamberObj.username || '--'}}：{{chamberObj.mobile || '--'}}</text>
								</view>
							</view>
							<image class="image_19"
								src="https://yjgs.jsonbug.com/storage/default/20250312/17421739640866070413.png"
								@tap="makePhoneCall" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 平台推荐商品 -->
		<view class="p-20">
			<recommend :hostProduct="hostProduct" :indexP="true" :isLogin="isLogin">
			</recommend>
			<view class="loadingicon acea-row row-center-wrapper" v-if="hostProduct.length > 0">
				<text class="loading iconfont icon-jiazai" :hidden="hotLoading == false"></text>
				{{ hotTitle || '' }}
			</view>
		</view>

		<!-- end -->
		<view style="height: 50rpx;"></view>

		<!-- <view @click="toUrlOpen" class="">
			qweqwe
		</view> -->


		<!-- 我的名片 -->
		<view @click="toMycardPage" class="box-create shadow-2" style="z-index: 999;">
			<text class="iconfont-yjgs">
				&#xe65d;
			</text>
			<text class="ml-10 pos-r" style="top: -2rpx;">我的名片</text>
		</view>
		<!-- end -->

	</view>
</template>

<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		configMap
	} from "@/utils";
	import {
		mapGetters
	} from "vuex";
	import {
		getProductHot,
	} from '@/api/store.js';
	import recommend from '@/pages/extend/components/recommend';
	import {
		comConfig,
		comDetail,
		comNews,
		userList,
		cardDetail,
		newDetail
	} from '@/api/extend.js';

	export default {
		components: {
			recommend
		},
		props: {},
		data() {
			return {
				ulist: [], // 领导列表
				newsList: [],
				menusList: [],
				hotScroll: true,
				hotLoading: false,
				hotTitle: '加载更多',
				hotPage: 1,
				hotLimit: 30,
				title: '',
				hostProduct: [],
				bannerList: [],
				currentSwiper: 0,
				scrollLeft: 0,
				scrollTimer: null,
				scrollWidth: 0,
				containerWidth: 0,
				isScrolling: false,
				resumeTimer: null,
				animationId: null,
				lastTimestamp: 0,
				scrollSpeed: 2.5, // 增加滚动速度，使其更加明显
				userHasScrolled: false, // 跟踪用户是否已手动滚动
				scrollPosition: 0,
				maxScrollPosition: 0,
				autoScrollTimer: null,
				touchStartX: 0,
				touchStartPosition: 0,
				isTouching: false,
				scrollStep: 0.8, // 每次滚动的步长
				// 地图相关数据
				mapInfo: {
					latitude: 34.335424, // 陕西省咸阳市渭城区的大致坐标
					longitude: 108.716103,
					address: '',
					name: ''
				},
				mapMarkers: [],
				bannerLoading: false, // 轮播图加载状态
				itemsPerPage: 8, // 每页显示8个菜单项
				currentPage: 0,
			};
		},
		computed: {
			...configMap({}, mapGetters(['isLogin', 'uid', 'userInfo'])),
			chamberObj() {
				return this.$store.state.extend.chamberObj
			},
			menuPages() {
				const pages = [];
				for (let i = 0; i < this.menusList.length; i += this.itemsPerPage) {
					pages.push({
						id: i / this.itemsPerPage,
						items: this.menusList.slice(i, i + this.itemsPerPage)
					});
				}
				return pages;
			}
		},

		created() {
			this.stopAutoScroll()
			// 获取轮播图数据
			this.getUserListFunc();
			this.getBannerList();
			this.get_host_product()
			this.getMenauList();
			this.getComNewsFunc();
		},
		mounted() {
			uni.$on('onReachBottom', () => {
				this.get_host_product();
			})
			// 确保DOM渲染完成后再启动自动滚动
			this.$nextTick(() => {
				// 延迟1秒确保DOM已完全渲染
				setTimeout(() => {
					this.startAutoScroll();
				}, 1000);
			});
			// 初始化地图标记点
			this.initMapMarkers();
		},
		beforeDestroy() {
			// 组件销毁前清除所有定时器
			this.stopAutoScroll();
		},
		methods: {
			toMycardPage() {
				if (!this.isLogin) {
					toLogin();
					return
				}

				uni.setStorageSync('store_import', {
					type: 'chamber',
					chamber_id: this.chamberObj.id
				});

				this.$timer.toMyCardPage();
			},
			toUrlOpen() {
				wx.openOfficialAccountArticle({
					url: 'https://mp.weixin.qq.com/s/UdysBxuufg0x7SPReP7x7Q', // 此处填写公众号文章连接
					success: res => {},
					fail: res => {}
				})
			},
			toPageNewDatails(item) {
				uni.navigateTo({
					url: `/pages/extend/chamber/news_more?cid=${this.chamberObj.id}&tid=${item.id}`
				})
			},
			getCardDetail() {
				uni.showLoading({
					title: '加载中...'
				})
				return new Promise((resolve, reject) => {
					cardDetail().then(res => {
						uni.hideLoading();
						if (res.status == 200 && res.data) {
							uni.setStorageSync('userCardInfo', res.data);
							resolve(res.data);
						} else {
							reject(new Error('获取名片信息失败'));
						}
					}).catch(err => {
						uni.hideLoading();
						reject(err);
					})
				});
			},
			referData() {
				this.title = this.chamberObj.nickname
				this.mapInfo.latitude = this.chamberObj.latitude
				this.mapInfo.longitude = this.chamberObj.longitude
				this.mapInfo.address = this.chamberObj.address
				this.mapInfo.name = this.chamberObj.nickname
			},
			toCardPage(item) {
				let card = uni.getStorageSync('userCardInfo');
				if (!card.id) {
					uni.showModal({
						content: `检测到您还未创建名片，名片让对接更高效，立即创建！`,
						cancelText: '暂不创建',
						confirmText: '立即创建',
						success(res) {
							if (res.cancel) { // 暂不创建
								if (item?.card?.id) {
									uni.navigateTo({
										url: '/pages/extend/connection/index_desc?id=' + item?.card?.id
									})
								} else {
									uni.showToast({
										title: '该用户还未创建名片信息',
										icon: 'none'
									})
								}
							} else { // 立即创建
								uni.navigateTo({
									url: `/pages/extend/connection/create`
								})
							}
						}
					})
					return;
				}

				if (item?.card?.id) {
					uni.navigateTo({
						url: '/pages/extend/connection/index_desc?id=' + item?.card?.id
					})
				} else {
					uni.showToast({
						title: '该用户还未创建名片信息',
						icon: 'none'
					})
				}

			},
			getUserListFunc() {
				userList({
					com_id: this.chamberObj.id
				}).then(res => {
					this.ulist = res.data.data;
				})
			},
			getComNewsFunc() {
				comNews({
					com_id: this.chamberObj.id,
					limit: 4
				}).then(res => {
					this.newsList = res.data.data
				})
			},
			/**
			 * 获取我的推荐
			 */
			get_host_product: function() {
				let that = this;
				let num = that.hotLimit;
				if (!that.hotScroll) return;
				if (that.hotLoading) return;
				that.hotLoading = true;
				that.hotTitle = '';
				getProductHot(that.hotPage, that.hotLimit).then(res => {
					let list = res.data.list;
					let productList = that.$util.SplitArray(list, that.hostProduct);
					let hotScroll = list.length <= num && list.length != 0;
					that.hotScroll = hotScroll;
					that.hotLoading = false;
					that.hotTitle = !hotScroll ? '已全部加载' : '加载更多';
					that.$set(that, 'hostProduct', productList);
					that.$set(that, 'hotPage', that.hotPage + 1);
				}).catch(err => {
					console.log(err);
				});
			},

			// 获取菜单数据
			getMenauList() {
				const params = {
					com_id: this.chamberObj?.id || 0,
					type: "2" // 固定值
				};
				comConfig(params).then(res => {
					this.bannerLoading = false;
					if (res.status === 200 && res.data) {
						this.menusList = res.data.map(item => {
							return {
								...item,
								image: this.$timer.ensureUrl(item.image)
							}
						})
					}
				})
			},
			// 获取轮播图数据
			getBannerList() {
				this.bannerLoading = true;
				const params = {
					com_id: this.chamberObj?.id || 0,
					type: "1" // 固定值
				};
				comConfig(params).then(res => {
					this.bannerLoading = false;
					if (res.status === 200 && res.data) {
						// 处理返回的数据，确保与组件所需格式一致
						this.bannerList = res.data.map(item => {
							return {
								img: this.$timer.ensureUrl(item.image)
							};
						});
					}
				}).catch(err => {
					this.bannerLoading = false;
					// 加载失败时显示默认图片
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},

			toPageDesc(item) {
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/extend/chamber/news_details?nid=' + item.id + '&cid=' + this.chamberObj.id
					})
				} else {
					wx.openOfficialAccountArticle({
						url: item.url, // 此处填写公众号文章连接
						success: res => {
							// 用于记录阅读数量
							newDetail({
								id: item.id
							})
						},
						fail: res => {}
					})
				}
			},
			toPageMore() {
				uni.navigateTo({
					url: `/pages/extend/chamber/news_more?cid=${this.chamberObj.id}`
				})
			},
			async toPagePost() {
				if (!this.isLogin) {
					toLogin();
					return;
				}

				// 判断是否创建名片
				let card = uni.getStorageSync('userCardInfo');
				if (card && card.id) {
					uni.navigateTo({
						url: '/pages/extend/chamber/chamber_post'
					})
				} else {
					try {
						await this.getCardDetail();
						// 如果获取名片成功，导航到申请入会页面
						uni.navigateTo({
							url: '/pages/extend/chamber/chamber_post'
						});
					} catch (error) {
						// 如果没有名片，提示创建名片
						uni.showToast({
							title: '创建名片后再申请入会！',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/extend/connection/create'
							})
						}, 1000)
					}
				}
			},
			// 轮播图切换事件
			onSwiperChange(e) {
				this.currentPage = e.detail.current;
			},

			// 点击轮播图
			clickSwiper(index) {
				// 可以根据索引处理点击事件
				console.log('点击了轮播图', index);
			},

			// 初始化地图标记点
			initMapMarkers() {
				this.mapMarkers = [{
					id: 1,
					latitude: this.mapInfo.latitude,
					longitude: this.mapInfo.longitude,
					title: this.mapInfo.name,
					iconPath: 'https://yjgs.jsonbug.com/storage/default/20250312/59c3dcb7c9caef6ca25d0c8de0417c04.png', // 使用现有的图标
					width: 32,
					height: 32,
					callout: {
						content: this.mapInfo.name,
						color: '#000000',
						fontSize: 14,
						borderRadius: 4,
						bgColor: '#ffffff',
						padding: 8,
						display: 'ALWAYS'
					}
				}];
			},

			// 打开地图位置
			openLocation() {
				uni.openLocation({
					latitude: (this.mapInfo.latitude - 1) + 1,
					longitude: (this.mapInfo.longitude - 1) + 1,
					name: this.mapInfo.name,
					address: this.mapInfo.address,
					scale: 18,
					success: function() {
						console.log('打开地图成功');
					},
					fail: function(err) {
						console.error('打开地图失败', err);
					}
				});
			},

			// 拨打电话
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: this.chamberObj.mobile || '18523171336',
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.error('拨打电话失败', err);
					}
				});
			},

			// 启动自动滚动
			startAutoScroll() {
				// 先停止可能存在的滚动
				this.stopAutoScroll();

				// 如果用户已手动滑动，不启动自动滚动
				if (this.userHasScrolled) {
					return;
				}

				// 获取容器和内容宽度
				const query = uni.createSelectorQuery().in(this);
				query.select('.auto-scroll-container').boundingClientRect();
				query.select('.auto-scroll-wrapper').boundingClientRect();

				query.exec(res => {
					if (res && res[0] && res[1]) {
						this.containerWidth = res[0].width;
						this.scrollWidth = res[1].width;
						this.maxScrollPosition = this.scrollWidth - this.containerWidth;

						// 设置定时器，每30毫秒滚动
						this.autoScrollTimer = setInterval(() => {
							// 如果用户正在触摸，不滚动
							if (this.isTouching) {
								return;
							}

							// 增加滚动位置
							this.scrollPosition += this.scrollStep;

							// 如果滚动到末尾，重置到开头
							if (this.scrollPosition >= this.maxScrollPosition) {
								// 平滑过渡到开头
								this.scrollPosition = 0;
							}
						}, 30);
					} else {
						// 如果获取不到元素，延迟后重试
						setTimeout(() => {
							this.startAutoScroll();
						}, 500);
					}
				});
			},

			// 停止自动滚动
			stopAutoScroll() {
				if (this.autoScrollTimer) {
					clearInterval(this.autoScrollTimer);
					this.autoScrollTimer = null;
				}

				if (this.scrollTimer) {
					clearInterval(this.scrollTimer);
					this.scrollTimer = null;
				}

				if (this.resumeTimer) {
					clearTimeout(this.resumeTimer);
					this.resumeTimer = null;
				}

				if (this.animationId) {
					if (typeof cancelAnimationFrame !== 'undefined') {
						cancelAnimationFrame(this.animationId);
					} else {
						clearTimeout(this.animationId);
					}
					this.animationId = null;
				}
			},
			onTouchStart(event) {
				// 停止自动滚动
				this.stopAutoScroll();

				// 清除可能存在的恢复定时器
				if (this.resumeTimer) {
					clearTimeout(this.resumeTimer);
				}

				// 记录触摸开始位置
				this.touchStartX = event.touches[0].clientX;
				this.touchStartPosition = this.scrollPosition;
				this.isTouching = true;
				this.userHasScrolled = true; // 标记用户已手动滑动
			},
			onTouchMove(event) {
				if (!this.isTouching) return;

				// 计算滑动距离
				const currentX = event.touches[0].clientX;
				const deltaX = this.touchStartX - currentX;

				// 更新滚动位置
				let newPosition = this.touchStartPosition + deltaX;

				// 限制滚动范围
				if (newPosition < 0) {
					newPosition = 0;
				} else if (newPosition > this.maxScrollPosition) {
					newPosition = this.maxScrollPosition;
				}

				this.scrollPosition = newPosition;
			},
			onTouchEnd(event) {
				this.isTouching = false;

				// 用户手动滑动后，延迟3秒后恢复自动滚动
				if (this.resumeTimer) {
					clearTimeout(this.resumeTimer);
				}

				this.resumeTimer = setTimeout(() => {
					this.userHasScrolled = false; // 重置用户滑动标志
					this.startAutoScroll(); // 恢复自动滚动
				}, 3000);
			},
			// 计算是否只有一行数据
			getSingleRow(items) {
				return items && items.length <= 4;
			},

			// 根据当前页计算 swiper 高度
			getSwiperHeight(pageIndex) {
				if (this.menuPages && this.menuPages[pageIndex]) {
					const items = this.menuPages[pageIndex].items;
					// 如果是单行，返回较小的高度
					return this.getSingleRow(items) ? 235 : 400; // 235rpx 包含了 grid 高度(165rpx)和外边距
				}
				return 400; // 默认高度
			},
		},
	};
</script>

<style scoped lang="css">
	.box-create {
		font-size: 28rpx;
		text-align: center;
		line-height: 60rpx;
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		bottom: 300rpx;
		right: 0rpx;
		position: fixed;
		width: 200rpx;
		height: 60rpx;
		background-color: #FC7243;
		color: white;
	}

	.mt-22-5 {
		margin-top: 45rpx;
	}

	.ml-11-5 {
		margin-left: 23rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-13-5 {
		margin-top: 27rpx;
	}

	.mt-19-5 {
		margin-top: 39rpx;
	}

	.ml-8-5 {
		margin-left: 17rpx;
	}

	.mt-37 {
		margin-top: 74rpx;
	}

	.ml-4-5 {
		margin-left: 9rpx;
	}

	.ml-10-5 {
		margin-left: 21rpx;
	}

	.mt-9-5 {
		margin-top: 19rpx;
	}

	.mt-10-5 {
		margin-top: 21rpx;
	}

	.ml-110 {
		margin-left: 220rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		background-color: #f2f2f2;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group {
		overflow-x: visible;
		height: 350rpx;
		position: relative;
	}

	.section {
		padding-left: 26rpx;
		padding-bottom: 117rpx;
		background-image: linear-gradient(172.5deg, #ff2e2e 48.2%, #c4000100 80%);
	}

	.group_3 {
		margin-top: 42rpx;
		width: 79.08rpx;
	}

	.text {
		color: #ffffff;
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		line-height: 22.76rpx;
		letter-spacing: -0.6rpx;
	}

	.image_4 {
		width: 48rpx;
		height: 48rpx;
	}

	.group_2 {
		margin-right: -69rpx;
		padding-bottom: 50rpx;
		width: 570.88rpx;
	}

	.section_2 {
		background-color: #ffc30033;
		filter: blur(30rpx);
		border-radius: 0 0 50% 50%;
		width: 318rpx;
		height: 270rpx;
	}

	.section_3 {
		background-color: #dbecff33;
		filter: blur(30rpx);
		border-radius: 50%;
		width: 230rpx;
		height: 230rpx;
	}

	.pos_4 {
		position: absolute;
		left: 107.88rpx;
		top: 90rpx;
	}

	.section_4 {
		padding: 11rpx 25rpx 14rpx;
		background-color: #ffffff99;
		border-radius: 50rpx;
		border-left: solid 1rpx #97979733;
		border-right: solid 1rpx #97979733;
		border-top: solid 1rpx #97979733;
		border-bottom: solid 1rpx #97979733;
	}

	.pos_5 {
		position: absolute;
		right: 81rpx;
		top: 100rpx;
	}

	.image-wrapper {
		width: 37rpx;
	}

	.image_6 {
		width: 37rpx;
		height: 13rpx;
	}

	.section_5 {
		background-color: #ffffff33;
		width: 1rpx;
		height: 37rpx;
	}

	.image_5 {
		width: 34rpx;
		height: 34rpx;
	}

	.image_3 {
		width: 49rpx;
		height: 22.68rpx;
	}

	.pos_3 {
		position: absolute;
		right: 97.34rpx;
		top: 34.68rpx;
	}

	.image_2 {
		width: 31rpx;
		height: 22rpx;
	}

	.pos_2 {
		position: absolute;
		right: 156rpx;
		top: 34.66rpx;
	}

	.image {
		width: 34rpx;
		height: 21rpx;
	}

	.pos {
		position: absolute;
		right: 197rpx;
		top: 35.32rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 30.4rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.pos_6 {
		position: absolute;
		left: 0;
		top: 113.76rpx;
	}

	.group_4 {
		margin-top: -252rpx;
		overflow-x: hidden;
		position: relative;
		z-index: 1;
	}

	.image_8 {
		border-radius: 20rpx;
		filter: drop-shadow(2rpx 4rpx 5.5rpx #0000000d);
		width: 620rpx;
		height: 275rpx;
	}

	.image_9 {
		margin-left: -606rpx;
	}

	.image_7 {
		border-radius: 20rpx;
		filter: drop-shadow(2rpx 4rpx 5.5rpx #0000000d);
		width: 93.6vw;
		height: 41.7333vw;
	}

	.group_5 {
		margin-top: 60rpx;
		padding-left: 19rpx;
		padding-right: 4rpx;
	}

	.image_10 {
		width: 48rpx;
		height: 12rpx;
	}

	.grid {
		margin-top: 10rpx;
		margin-right: 0;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		display: grid;
		grid-template-rows: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(4, minmax(0, 1fr));
		height: 330rpx;
		transition: height 0.3s ease;
	}

	.grid-single-row {
		grid-template-rows: 1fr;
		height: 165rpx;
	}

	.grid-item {
		padding: 20rpx 0;
		transition: all 0.3s ease;
	}

	.grid-item:active {
		transform: scale(0.95);
	}

	.image_11 {
		width: 96rpx;
		height: 96rpx;
		border-radius: 20rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: SourceHanSansCN;
		line-height: 24.34rpx;
		color: #000000;
	}

	.group_6 {
		padding-top: 39rpx;
	}

	.section_6 {
		margin-right: 14rpx;
		padding: 92rpx 0 22rpx;
		background-image: linear-gradient(108.4deg, #f9614c -36.2%, #ff833b 116.1%);
		border-radius: 10rpx;
		filter: drop-shadow(0rpx 2rpx 2rpx #00000014);
		overflow: hidden;
		border-left: solid 2rpx #ffffff;
		border-right: solid 2rpx #ffffff;
		border-top: solid 2rpx #ffffff;
		border-bottom: solid 2rpx #ffffff;
	}

	.font_4 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.08rpx;
		color: #666666;
	}

	.text_3 {
		margin-left: 46rpx;
		color: #ffffff99;
		/* line-height: 22.26rpx; */
		margin-top: 20rpx;
	}

	.pos_7 {
		position: absolute;
		left: 47.12rpx;
		right: 0;
		top: 0;
	}

	.section_7 {
		padding: 38rpx 0 32rpx;
		background-image: url('https://yjgs.jsonbug.com/storage/default/20250312/17421739637088763230.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 440rpx;
	}

	.text-wrapper {
		margin-right: 32rpx;
		padding: 18rpx 0 16rpx;
		background-color: #ffffff;
		border-radius: 209rpx;
		width: 153rpx;
		border-left: solid 1rpx #f31d1a;
		border-right: solid 1rpx #f31d1a;
		border-top: solid 1rpx #f31d1a;
		border-bottom: solid 1rpx #f31d1a;
	}

	.font_3 {
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		/* line-height: 50rpx; */
		color: #000000;
	}

	.text_2 {
		color: #f31d1a;
		line-height: 26.04rpx;
	}

	.pos_8 {
		position: absolute;
		left: 0;
		top: 20rpx;
		width: 65vw;
		line-height: 40rpx;
	}

	.section_8 {
		margin-right: 16rpx;
		padding: 22rpx 10rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.image-wrapper_2 {
		padding: 13rpx 0;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		width: 160rpx;
		height: 160rpx;
	}

	.image_12 {
		width: 134rpx;
		height: 134rpx;
	}

	.text_4 {
		color: #000000;
		font-size: 34rpx;
		font-family: SourceHanSansCN;
		line-height: 31.86rpx;
	}

	.text_5 {
		line-height: 29rpx;
	}

	.group_7 {
		padding-bottom: 24rpx;
	}

	.section_9 {
		background-color: #f00000;
		border-radius: 0rpx 6.16rpx 6.16rpx 0rpx;
		width: 8rpx;
		height: 40rpx;
	}

	.font_5 {
		font-size: 32rpx;
		font-family: SourceHanSansCN;
		line-height: 30.4rpx;
		color: #000000;
	}

	.text_6 {
		line-height: 30.06rpx;
	}

	.section_10 {
		padding: 10rpx 0 26rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.group_8 {
		flex: 1 1 177rpx;
	}

	.leader-scroll {
		width: 100%;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}

	.leader-container {
		display: flex;
		padding: 20rpx 0;
		width: max-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		transition: transform 0.3s ease;
	}

	.equal-division-item {
		margin-right: 20rpx;
		width: 176rpx;
		flex-shrink: 0;
		transition: all 0.3s ease;
	}

	.image_13 {
		border-radius: 5.04rpx;
		width: 176rpx;
		height: 176rpx;
	}

	.font_6 {
		font-size: 28rpx;
		font-family: SourceHanSansCN;
		line-height: 26.32rpx;
		font-weight: 700;
		color: #000000;
	}

	.text_7 {
		line-height: 26.28rpx;
	}

	.image_14 {
		border-radius: 10rpx;
		width: 176rpx;
		height: 176rpx;
	}

	.text_8 {
		margin-top: 14rpx;
		line-height: 26.46rpx;
	}

	.text_10 {
		margin-top: 20rpx;
	}

	.image_15 {
		border-radius: 5.04rpx 0rpx 0rpx 5.04rpx;
		width: 176rpx;
		height: 176rpx;
	}

	.text_9 {
		line-height: 26.6rpx;
	}

	.text_11 {
		line-height: 29.9rpx;
	}

	.text_12 {
		margin-right: 14rpx;
		color: #666666;
		line-height: 24.08rpx;
	}

	.news-list {
		margin-top: 23rpx;
	}

	.news-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
		margin-right: 16rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 6rpx;
		border-bottom: solid 0.5rpx rgba(0, 0, 0, 0.15);
		height: 200rpx;
	}

	.news-image {
		width: 192rpx;
		height: 150rpx;
		border-radius: 2rpx;
		flex-shrink: 0;
	}

	.news-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		position: relative;
		height: 100%;
	}

	.news-title-container {
		margin-bottom: 10rpx;
	}

	.news-title {
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		font-weight: 700;
		color: #000000;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.news-tag {
		padding: 0 10rpx;
		background-color: #FF2E2E;
		color: white;
		font-size: 26rpx;
		border-radius: 6rpx;
		display: inline-block;
		position: absolute;
		top: 90rpx;
	}

	.news-footer {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom: 0;
		width: 100%;
		margin-right: 10rpx;
	}

	.news-date {
		font-size: 26rpx;
		color: #666666;
	}

	.news-views {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.news-views-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.news-views-count {
		margin-left: 8rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.image-wrapper_3 {
		margin-right: 16rpx;
		padding: 20rpx 0;
		background-color: #ffffff;
		border-radius: 6rpx;
	}

	.map-wrapper {
		position: relative;
		width: 670rpx;
		height: 369rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.map-container {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}

	/* 覆盖层用于遮挡左下角的logo */
	.map-cover-bottom-left {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 160rpx;
		height: 40rpx;
		background-color: #ffffff;
		z-index: 999;
	}

	.image_18 {
		border-radius: 10rpx;
		width: 670rpx;
		height: 369rpx;
	}

	.group_15 {
		margin-right: 16rpx;
		border-radius: 6rpx;
	}

	.section_12 {
		padding: 16rpx 20rpx;
		background-color: #ffffff;
	}

	.image_21 {
		border-radius: 15rpx;
		width: 48rpx;
		height: 48rpx;
	}

	.group_16 {
		margin-left: 22rpx;
	}

	.font_9 {
		font-size: 30rpx;
		font-family: SourceHanSansCN;
		line-height: 28.44rpx;
		color: #000000;
	}

	.text_14 {
		line-height: 27.96rpx;
	}

	.font_10 {
		font-size: 26rpx;
		font-family: SourceHanSansCN;
		line-height: 24.34rpx;
		color: #999999;
	}

	.text_15 {
		line-height: 35rpx;
	}

	.image_19 {
		width: 72rpx;
		height: 72rpx;
	}

	.image_20 {
		margin-left: 40rpx;
	}

	.section_13 {
		padding: 16rpx 20rpx 26rpx;
		background-color: #ffffff;
		border-radius: 0rpx 0rpx 10rpx 10rpx;
		border-top: solid 0.5rpx #00000026;
	}

	.text_16 {
		line-height: 24.18rpx;
	}

	.section_14 {
		margin-top: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		filter: drop-shadow(-2rpx -1rpx 3rpx #00000026);
		height: 125rpx;
	}

	.text_18 {
		color: #d43030;
		line-height: 22.26rpx;
	}

	.text_19 {
		line-height: 22.34rpx;
	}

	.text_17 {
		line-height: 22.26rpx;
	}

	.equal-division-item_3 {
		margin: 10rpx 0;
	}

	.group_17 {
		padding: 6rpx 0 18rpx;
		overflow: hidden;
		width: 97rpx;
		height: 115rpx;
	}

	.font_11 {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		line-height: 22.08rpx;
		color: #333333;
	}

	.equal-division-item_2 {
		padding: 16rpx 0 32rpx;
	}

	.equal-division_2 {
		padding: 0 4rpx;
	}

	.equal-division-item_4 {
		padding-bottom: 12rpx;
		overflow: hidden;
		width: 97rpx;
		height: 102rpx;
	}

	/* uView轮播图自定义样式 */
	.custom-swiper {
		width: 100%;
	}

	.banner-wrapper {
		width: 100%;
		padding: 0 20rpx;
		margin-top: -140rpx;
		position: relative;
		z-index: 10;
		height: 300rpx;
	}

	.banner-loading {
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 10rpx;
		margin: 0 10rpx;
	}

	/* 确保轮播图可以正常滑动 */
	::v-deep .u-swiper {
		overflow: visible !important;
	}

	::v-deep .u-swiper__wrapper {
		overflow: visible !important;
	}

	::v-deep .u-swiper__item {
		transition: all 0.3s;
		touch-action: pan-y;
	}

	::v-deep .u-swiper__indicator {
		bottom: 20rpx !important;
	}

	/* 商(协)会领导班子滑动样式 */
	.auto-scroll-container {
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.auto-scroll-wrapper {
		display: flex;
		padding: 20rpx 0;
		width: max-content;
		padding-left: 20rpx;
		padding-right: 20rpx;
		transition: transform 0.5s ease-out;
		will-change: transform;
		touch-action: pan-x;
	}

	.equal-division-item {
		margin-right: 20rpx;
		width: 176rpx;
		flex-shrink: 0;
	}

	.menu-container {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-right: 16rpx;
		transition: height 0.3s ease;
		position: relative;
		/* 添加相对定位，使指示点定位准确 */
	}

	.page-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 40rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.indicator-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.3);
		margin: 0 8rpx;
		transition: all 0.3s;
	}

	.indicator-dot.active {
		background-color: #ff0000;
		width: 24rpx;
		border-radius: 12rpx;
	}

	/* 自定义指示点样式 */
	.custom-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 10;
		pointer-events: auto;
	}

	.indicator-item {
		width: 30rpx;
		height: 6rpx;
		background-color: rgba(0, 0, 0, 0.3);
		margin: 0 5rpx;
		border-radius: 3rpx;
		transition: all 0.3s;
	}

	.indicator-item.active {
		background-color: #ff0000;
		width: 50rpx;
	}
</style>